<style lang="sass" scoped>
    // 拖拽头图
    .common_drop_photo{
        overflow: hidden;
        .drop_area{
            width:0;
            height:0;
            border:dashed 2px #ccc;
            text-align: center;
            line-height:0;
            font-size: 0; 
            cursor:pointer;
        }
        .drop_area.sm{
            width:140px;
            height: 50px;
            line-height: 50px;
            font-size: 12px;

        }
        .drop_area.md{
            width:280px;
            height: 100px;
            line-height: 100px;
            font-size: 20px;
        }
        .drop_area.lg{
            width:560px;
            height: 200px;
            line-height: 200px;
            font-size: 36px;
        }
        .drop_yulan{
            width: 100%;
            padding: 10px;
            
        }
    }
</style>

<template>
    <div class="common_drop_photo" v-if='!ua'>
        <!-- 拖拽头图 -->
        <div id="{{options.el}}" class="drop_area">点击或者将图片拖拽到此区域</div>
        <!-- 预览头图 -->
        <div id="{{options.elyl}}" class="drop_yulan"></div>
    </div>
</template>

<script>
    export default {
        props:{
            options:{
                type: Object,
                twoWay: true,
                default:{},
            },
            callback:{
                type: Function,
            },
        },
        data(){
            return {
                ua:common.ie
            }
        },
        beforeCompile(){
            var config={
                el:'drop_area',//拖拽区域html盒子
                elyl:'drop_yulan',//预览html盒子
                isylShow:false,//是否默认显示预览区域
                file:'myfiles',//上传文件file
                data:{},//额外参数
                url:'',//ajax上传api,#####必填#####
                checktype:['jpg','png','gif','jpeg'],//上传图片类型
                boxSize:'md',//设置盒子大小
                isSingle:false,//是否只允许单张上传，默认为多张上传
                isSingleText:null,//单文件上传提示，考虑到调用common.cerateFileFormData方法,所以默认值设为null
            }
            // 处理继承
            for(var i in config){
                for(var k in this.options){
                    if(i==k){
                        config[k]=this.options[k]
                    }
                }
            }
            this.options=config;
        },
        ready(){
            //拖拽上传图片 阻止浏览器默认行。 
            $(document).on({ 
                dragleave:function(e){    //拖离 
                    e.preventDefault(); 
                }, 
                drop:function(e){  //拖后放 
                    e.preventDefault(); 
                }, 
                dragenter:function(e){    //拖进 
                    e.preventDefault(); 
                }, 
                dragover:function(e){    //拖来拖去 
                    e.preventDefault(); 
                } 
            }); 
            var box = document.getElementById(this.options.el); //拖拽区域
            //根据传参改变盒子大小
            switch(this.options.boxSize){
                case 'sm':
                $('#'+this.options.el).addClass('sm');
                break;
                case 'md':
                $('#'+this.options.el).addClass('md');
                break;
                case 'lg':
                $('#'+this.options.el).addClass('lg');
                break;
            }
            //监听点击事件上传图片
            box.addEventListener('click',(e)=>{
                var json={
                    url:this.options.url,
                    checktype:this.options.checktype,
                    filename : this.options.file,
                    isSingle: this.options.isSingle,
                    success:(data=>{
                        this.callback&&this.callback(data);
                    })
                }
                if(this.options.isSingleText){
                    json.isSingleText=this.options.isSingleText
                }
                common.cerateFileFormData(json)
            });
            //监听拖拽事件上传图片
            box.addEventListener('drop',(e)=>{
                e.preventDefault(); //取消默认浏览器拖拽效果 
                var fileList = e.dataTransfer.files; //获取文件对象
                var checkFileType=this.options.checktype;//上传文件类型
                var isSingleText=this.options.isSingleText||'请上传单张图片！'
                //检测是否是拖拽文件到页面的操作 
                if(fileList.length == 0){ 
                    return false; 
                }
                //检测是否单张图片
                if(this.options.isSingle&&fileList.length>1){
                    popup.alert({type:'msg',title:isSingleText});
                    return false;
                }
                //检测文件是不是图片 
                for(var i=0;i<fileList.length;i++){
                    var begin=false;
                    for(var k=0;k<checkFileType.length;k++){
                        var result=new RegExp("\."+checkFileType[k]+"$",'i').test(fileList[i]['name'])
                        if(result){
                            begin=true
                        }
                    }
                    if(!begin){
                        popup.alert({title:'请上传正确的文件类型！'}); return false;
                    }
                    
                }
                //拖拉图片到浏览器，可以实现预览功能 
                var html="";
                var formData = new FormData();  
                for(var i=0;i<fileList.length;i++){
                    html+=`<div style="width:120px;height:100px;float:left;border:1px solid #ccc; padding:3px;border-radius:3px">
                         <img style="width:100% ;height:auto;display:block" src="${window.webkitURL.createObjectURL(fileList[i])}"/>
                         <span style="display:block;text-align:center;color:#6f8fb7;">${fileList[i].name}</span>
                         </div>`;
                    formData.append(this.options.file, fileList[i]);        
                };
                for(let n in this.options.data){
                    formData.append(n, this.options.data[n]);
                }
                if(this.options.isylShow){
                    $('#'+this.options.elyl).html(html); 
                }
                $('#loading').stop().fadeIn(200);
                // ajax上传
                common.fileAJAX({
                    url:this.options.url,
                    data:formData,
                    success:(data=>{
                        this.callback&&this.callback(data);
                    })
                }); 
            })
        },
        methods:{

        }
    }
</script>

